<template>

    <div class="ly-home" >
        <div class="ly-carousel" >
            <el-carousel indicator-position="outside" :interval="4000"  > <!-- type="card" -->
                <el-carousel-item v-for="(article,index) in fireArticle"
                                  :key="index"
                                  class="ly-carousel-item"
                                  :style="{background: 'url(' + article.showImg + ') no-repeat center top ',backgroundSize:'contain'}">
                    <div class="ly-carousel-content">
                        <el-button type="text" @click="showDetail(article.id)">
                            <span>{{ article.title }}</span>
                        </el-button>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="ly-home-article">
            <el-divider content-position="center">
                <h2><i class="fa fa-calendar"></i>&nbsp;文章</h2>
            </el-divider>
            <el-row :gutter="12">
                <el-timeline >
                    <el-timeline-item v-for="(article,index) in timeArticle"
                                      :key="index"
                                      :timestamp="article.createTime | formatDate"
                                      color="#0bbd87"
                                      placement="top">
                        <el-card>
                            <h4>{{article.title}}</h4>
                            <p>{{article.content}}
                                <el-button type="text"
                                           @click="showDetail(article.id)"
                                           :title="article.title"> >>更多>>
                                </el-button>
                            </p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-row>
        </div>

    </div>

</template>

<script>

    import {formatDate} from "@/utils/mixin.js"
    export default{
        data(){
            return {
                fireArticle:[],
                timeArticle:[],
            }
        },
        methods:{
            // 获取分页数据
            findPageArticleWatch: function () {
                this.$api.Info.showList({
                    'page': 1,
                    'limit': 5,
                    'watchTime':true
                }).then((data) => {
                    if (data && data.code === 0) {
                        this.fireArticle = data.page.list
                    }
                });
            },
            findPageArticleTime: function () {
                this.$api.Info.showList({
                    'page': 1,
                    'limit': 5,
                }).then((data) => {
                    if (data && data.code === 0) {
                        this.timeArticle = data.page.list
                    }
                });
            },
            showDetail(idVal){
                this.$router.push({path:'/show/article/detail',query:{id:idVal}})
            },
        },
        mounted() {
            this.findPageArticleWatch();
            this.findPageArticleTime();
        },
        mixins: [formatDate]
    }

</script>

<style>

    .ly-carousel-item{
        height: 300px;
        text-align: center;
    }

    .ly-carousel-content{
        width: 100%;
        color: white;
        position:absolute;
        bottom: 10px;
        text-align: center;
    }

    .ly-carousel-content span{
        font-size: 25px;
        font-weight: bold;
    }


    .ly-essay-card{
        min-height: 100px;
    }

    .ly-home-article{
        margin-top: 50px;
    }

    .ly-home-article-card{
        margin-top: 10px;
    }


</style>